<template>
	<view class="psdIptBx">
		<block v-for="(item , index) in length" :key='index'>
			<view class="psdTtem" @tap="open">
				<text v-if="index < password.length" class="psdTtemTxt">
					<text> ● </text>
				</text>
			</view>
		</block>
		<number-keyboard tabBar ref='Keyboard' @input='onKeydown' psdLength='4'></number-keyboard>
	</view>
</template>

<script>
	import numberKeyboard from '@/components/keyboard/keyboard.vue'
	export default {
		components: {
			numberKeyboard,
		},
		props: {
			length: {
				type: Number,
				default: 4
			}
		},
		data() {
			return {
				password: ""
			}
		},
		watch: {
			password(nv, ov) {
				if (nv.length === 4) {
					this.$emit('submit', nv)
				}
			},
		},
		methods: {
			open() {
				this.$refs.Keyboard.open();
			},
			close() {
				this.$refs.Keyboard.close();
			},
			reset() {
				this.onKeydown('');
				this.$refs.Keyboard.reset();
			},
			//输入的值
			onKeydown(val) {
				if (val.length <= this.length) {
					this.password = val;
				}
			}
		}
	}
</script>

<style scoped>
	.psdIptBx {
		margin: 0 auto;
		display: flex;
		width: 382rpx;
		text-align: center;
		justify-content: space-between;
	}

	.psdTtem {
		flex: 0 0 88rpx;
		line-height: 1;
		width: 88rpx;
		height: 88rpx;
		background: #F0F1F2;
		border-radius: 4rpx;
	}

	.psdTtemTxt {
		text-align: center;
		line-height: 88rpx;
		font-size: 30rpx;
	}

	.focus_move {
		color: #E6240F;
		font-size: 30rpx;
		line-height: 88rpx;
		animation: focus 0.8s infinite;
	}

	@keyframes focus {
		from {
			opacity: 1;
		}

		to {
			opacity: 0;
		}
	}
</style>
